<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>WEBSQL-SQL 检测任务新增</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}" media="screen"/>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/code/codemirror.css}" media="all"/>
    <link rel="stylesheet" th:href=@{/static/code/show-hint.css} media="all"/>
    <style>
        .sqlTxt {
            border: 1px solid;
            border-radius: 12px;
            box-shadow: 2px 2px 5px #bbb;
            font-size: 20px;
            height: 600px;
        }

        .CodeMirror {
            border-radius: 12px;
        }

        .sqlTab {
            border: 1px solid;
            border-radius: 12px;
            box-shadow: 2px 2px 5px #bbb;
            font-size: 14px;
            margin: 12px;
            position: relative;
        }

        .menus {
            border: 1px solid;
            border-radius: 12px;
            box-shadow: 2px 2px 5px #bbb;
            margin: 5px;
        }

        .layui-form-item {
            margin-bottom: 5px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="menus" style="margin:5px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称:</label>
                <div class="layui-input-inline" >
                    <input type="text" id="name" name="name" class="layui-input" lay-affix="clear"
                           placeholder="检测任务名称"/>
                </div>

                <label class="layui-form-label">数据源:</label>
                <div class="layui-input-inline">
                    <select name="dataBaseName" id="dataBaseName" lay-filter="dataBaseName" lay-search=""
                            lay-affix="clear"></select>
                </div>

                <label class="layui-form-label">CRON:</label>
                <div class="layui-input-inline" >
                    <input type="text" id="cron" name="cron" class="layui-input" value="0/30 * * * * ?"
                           lay-affix="clear"
                           placeholder="定时表达式"/>
                </div>

                <label class="layui-form-label">状态:</label>
                <div class="layui-input-inline">
                    <select name="state" lay-verify="required" lay-search="">
                        <option value="开始监控">开始监控</option>
                        <option value="停止监控">停止监控</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">列名:</label>
                <div class="layui-input-inline">
                    <input type="text" id="columnName" name="columnName" class="layui-input" lay-affix="clear"
                           placeholder="SQL结果中列名"/>
                </div>

                <label class="layui-form-label">告警表达式:</label>
                <div class="layui-input-inline">
                    <input type="text" name="expression" id="expression" class="layui-input"
                           placeholder="result-2>0"
                           lay-affix="clear"/>
                </div>

                <label class="layui-form-label">告警级别:</label>
                <div class="layui-input-inline">
                    <select name="alarmLevel" lay-verify="required" lay-search="">
                        <option value="普通">普通</option>
                        <option value="紧急">紧急</option>
                    </select>
                </div>

                <label class="layui-form-label">告警模板:</label>
                <div class="layui-input-inline">
                    <select name="messageTemplate" id="messageTemplate" lay-filter="messageTemplate" lay-search=""
                            lay-affix="clear"></select>
                </div>
            </div>

            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary layui-border-green" lay-submit lay-filter="save">
                    <i class="layui-icon  layui-icon-add-circle">&nbsp;</i>保存
                </button>

                <button class="layui-btn layui-btn-primary layui-border-blue"
                        onclick="openPage('在线生成Cron后 复制Cron 表达式','http://cron.qqe2.com/',3001);return false">
                    <i class="layui-icon layui-icon-time">&nbsp;</i> CRON
                </button>
            </div>
        </div>
    </form>
</div>

<div class="sqlTxt">
    <textarea id='sqlText' style="width: 100%;height: 600px;display:block;"></textarea>
</div>

<script th:src="@{/static/layui.js}"></script>
<script th:replace="~{base::ctx}"></script>
<script th:src="@{/static/lay-config.js}"></script>
<script th:src="@{/static/code/codemirror.js}"></script>
<script th:src="@{/static/code/matchbrackets.js}"></script>
<script th:src="@{/static/code/sql.js}"></script>
<script th:src="@{/static/code/show-hint.js}"></script>
<script th:src="@{/static/code/sql-hint.js}"></script>
<script th:src="@{/static/base64.min.js}"></script>
<script>
    layui.use(['jquery', 'layer', 'form', 'laySelect'], function () {
        const layer = layui.layer;
        const form = layui.form;
        const $ = layui.jquery;
        const select = layui.laySelect;

        /**
         * 编辑器初始化
         * @type {CodeMirror}
         */
        const editor = CodeMirror.fromTextArea(document.getElementById("sqlText"), {
            lineNumbers: true,
            mode: {
                name: "text/x-plsql"
            },
            matchBrackets: true,
            styleActiveLine: true,
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            spellcheck: true,
            lineWrapping: true,
            extraKeys: {
                'Ctrl': 'autocomplete',
                Tab: function (cm) {
                    let spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
                    cm.replaceSelection(spaces);
                }
            }
        });
        editor.setSize('auto', '600px');
        editor.on('keypress', () => {
            editor.showHint();
        });

        /**
         * 数据去向
         */
        let activeDataSource;//选中的数据源
        select.render({
            elem: "#dataBaseName",
            url: ctx + 'dataSourceManager/findDataSourceList',
            select: 10000,
            title: '请选择数据源',
            format: function (data) {
                return parseSelectData(data);
            },
            success: function (data, activeData) {
                activeDataSource = activeData.length === 0 ? null : activeData[0].code;
                editorHintSettings();
            },
            onselect: function (data) {
                activeDataSource = data;
                editorHintSettings();
            }
        });

        //告警模板列表
        let activeMessageTemplate;
        select.render({
            elem: "#messageTemplate",
            url: ctx + 'settingManager/findMessageTemplateList',
            select: 10000,
            title: '请选择告警模板',
            format: function (data) {
                return parseSelectData(data);
            },
            success: function (data, activeData) {
                activeMessageTemplate = activeData.length === 0 ? null : activeData[0].code;
            },
            onselect: function (data) {
                activeMessageTemplate = data;
            }
        });


        /**
         * 设置编辑器提示表名及字段功能
         */
        function editorHintSettings() {
            if (activeDataSource === "" || activeDataSource == null) {
                return false;
            }
            post(ctx + "sqlManager/findTableField?database=" + activeDataSource, null, (res) => {
                if (res.code !== 200 || res.data === null) {
                    console.error("获取表名及字段失败,无法提供编辑器提示功能!" + res.msg);
                    return false;
                }
                editor.setOption('hintOptions', {
                    completeSingle: false,
                    tables: res.data
                });
            });
        }

        /**
         * 执行SQL
         */
        form.on('submit(save)', function (data) {
            let sqlContent = editor.getValue().trim();
            if (sqlContent === "" || sqlContent == null) {
                layer.msg("SQL语句为空，无需保存哦~", {icon: 2});
                return false;
            }
            if (activeDataSource === "" || activeDataSource == null) {
                layer.msg("请选择数据源~", {icon: 2});
                $("#msgDiv").show();
                $("#msgSpan").text("ERROR:请选择数据来源~");
                return false;
            }
            data.field.sqlContent = Base64.encode(sqlContent);
            data.field.dataBaseName = activeDataSource;
            data.field.messageId = activeMessageTemplate;
            post(ctx + "detectionManager/add", data.field, (res) => {
                layer.msg(res.msg, {icon: res.code === 200 ? 1 : 2}, (res) => {
                    location.reload();
                });
            });
            return false;
        });
    });
</script>
</body>
</html>